<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-28 16:21:26
 * @LastEditTime: 2020-03-07 16:03:23
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <style type="text/css">
        body {
            background: rgba(0, 0, 0, .6);
        }

        .init-full {
            position: relative;
        }

        #app {

            background: transparent;
            overflow: hidden;
            /* box-shadow: 0 0 5px rgb(200, 198, 198); */
            width: 85%;
            height: auto;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .i {
            position: relative;
        }

        .i img {
            width: 100%;
        }

        .i span {
            position: absolute;
            font-size: 22px;
            font-weight: 500;
            left: 9%;
            top: 47%;
            color: #fff;
        }

        .c {
            padding: 10px 15px;
            background: #fff;
            margin-top: -2px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .c .t {
            font-size: 16px;
            white-space: pre-line;
            color: #575757;
            height: 150px;
            line-height: 24px;
        }

        .c .b {
            text-align: center;
            padding: 10px 0 10px 0;
            height: 60px;
        }

        .close {
            text-align: center;
            padding: 20px 0;

        }

        .close img {
            width: 30px;
        }

        .u-n {
            color: #9e9e9e;
            font-size: 14px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <div class="i">
                <img src="../../image/app-update.png" />
                <span>V{{updateData.version}}</span>
            </div>
            <div class="c">
                <div class="t">{{updateData.updateTip}}</div>
                <div class="b">
                    <van-button color="linear-gradient(to right, #ffd01e, #f95861)" round style="width:200px"
                        @click="updateNow" v-if="!isUpdate">立即更新</van-button>
                    <div v-if="isUpdate">
                        <div class="u-n">正在更新：</div>
                        <van-progress :percentage="progressValue" :show-pivot="false" color="#f95861"></van-progress>
                    </div>
                </div>
            </div>
            <div class="close" v-if="!updateData.closed">
                <img src="../../image/close.png" @click="closeFrame" />
            </div>
        </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var updateData = api.pageParam.updateData;


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                updateData: updateData,
                isUpdate: false,
                progressValue: 0
            },
            created: function () {

            },
            methods: {
                closeFrame() {
                    api.closeFrame();
                },
                updateNow() {
                    var that = this;
                    if (api.systemType == "android") {
                        that.isUpdate = true;
                        api.download({
                            url: that.updateData.source,
                            report: true
                        }, function (ret, err) {
                            if (ret && 0 == ret.state) {/* 下载进度 */
                                that.progressValue = parseInt(ret.percent);
                            }
                            if (ret && 1 == ret.state) {/* 下载完成 */
                                that.progressValue = 100;
                                var savePath = ret.savePath;
                                api.installApp({
                                    appUri: savePath
                                });
                                that.isUpdate = false;
                                if (!that.updateData.closed) {
                                    api.closeFrame();
                                }

                            }
                        });
                    } else {
                        api.installApp({
                            appUri: that.updateData.source
                        });
                        that.isUpdate = false;
                        if (!that.updateData.closed) {
                            api.closeFrame();
                        }
                    }

                }
            }
        })
    };
</script>

</html>